<template>
	<view class="holdon" @click="triggerClick" catchtouchmove="true">
		<image class="ball" :style="'left:' + moveX + 'px;top:' + moveY + 'px'" @touchstart="drag_start" @touchmove.stop.prevent="drag_hmove" :src="imageBg" mode="aspectFit"></image>
	</view>
</template>

<script>
export default {
	props: {
		image: {
			type: String,
			default: ''
		},
		imageBg: {
			type: String,
			default: ''
		}
	},
	mounted() {
	},
	data() {
		const info = uni.getSystemInfoSync();
		return {
			start: [0, 0],
			moveY: info.windowHeight - 140,
			moveX: info.windowWidth - 60,
			winHeight: info.windowHeight,
			winWidth: info.windowWidth
		};
	},
	methods: {
		drag_start(event) {
			this.start[0] = event.touches[0].clientX - event.target.offsetLeft;
			this.start[1] = event.touches[0].clientY - event.target.offsetTop;
		},
		drag_hmove(event) {
			const { winWidth, winHeight } = this;
			let tag = event.touches;
			let moveX = tag[0].clientX - this.start[0];
			let moveY = tag[0].clientY - this.start[1];
			this.moveX = moveX >= 1 ? (moveX < winWidth - 46 ? moveX : winWidth - 46) : 1;
			this.moveY = moveY >= 45 ? (moveY < winHeight - 51 ? moveY : winHeight - 51) : 45;
		},
		triggerClick() {
			this.$emit('signClick', ...arguments);
		},
	}
};
</script>

<style lang="less">
.holdon {
	width: 100%;
	height: 100%;
}
.ball {
	width: 45px;
	height: 50px;
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed !important;
	z-index: 10;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
}
</style>
